<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>uAdmin - Professional, Responsive and Flat Admin Template</title>
<meta name="description" content="uAdmin is a Professional, Responsive and Flat Admin Template created by pixelcave and published on Themeforest" />
<meta name="author" content="pixelcave" />
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-57x57-precomposed.png" />
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic" />       
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/plugins.css" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="page-container">
<header class="navbar navbar-inverse">
<div class="navbar-inner remove-radius remove-box-shadow">
<div class="container-fluid">
<ul class="nav pull-right visible-phone visible-tablet">
<li class="divider-vertical remove-margin"></li>
<li>
<a href="javascript:void(0)" data-toggle="collapse" data-target=".nav-collapse">
<i class="icon-reorder"></i>
</a>
</li>
</ul>
<a href="index.php" class="brand"><img src="img/template/logo.png" alt="logo" /></a>
<div id="loading" class="hide pull-left"><i class="icon-certificate icon-spin"></i></div>
<ul id="widgets" class="nav pull-right">
<li class="divider-vertical remove-margin"></li>
<li id="rss-widget" class="dropdown dropdown-left-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-rss"></i>
<span class="badge badge-warning display-none"></span>
</a>
<ul class="dropdown-menu widget widget-fluid">
<li class="widget-heading text-center">Web Design</li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-umbrella"></i>This is a headline</a></li>
<li class="divider"></li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-trophy"></i>Another headline</a></li>
<li class="divider"></li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-suitcase"></i>Headlines keep coming!</a></li>
<li class="widget-heading text-center">Web Developent</li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-phone"></i>New headline</a></li>
<li class="divider"></li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-pencil"></i>Another one</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)" class="text-center">All News</a></li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li id="twitter-widget" class="dropdown dropdown-left-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-twitter"></i>
<span class="badge badge-info display-none"></span>
</a>
<ul class="dropdown-menu widget">
<li class="widget-heading"><i class="icon-comments-alt pull-right"></i>Latest Tweets</li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Michael</a><span class="label label-info">just now</span></h6>
<div class="media">Web design all the way!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Monica</a><span class="label label-info">3 min ago</span></h6>
<div class="media">Download free PSDs at <a href="http://bit.ly/YUs4SQ" target="_blank">http://bit.ly/YUs4SQ</a></div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Steven</a><span class="label label-info">45 min ago</span></h6>
<div class="media">Be sure to check out my portfolio!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Tim</a><span class="label label-info">1 hour ago</span></h6>
<div class="media">Get all our themes for free for the next 2 hours! <a href="javascript:void(0)">#freebies</a></div>
</div>
</div>
</li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li id="messages-widget" class="dropdown dropdown-left-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-envelope"></i>
<span class="badge badge-success">1</span>
</a>
<ul class="dropdown-menu widget pull-right">
<li class="widget-heading"><i class="icon-comment pull-right"></i>Latest Messages</li>
<li class="new-on">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_light_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">George</a><span class="label label-success">2 min ago</span></h6>
<div class="media">Thanks for your help! The tutorial really helped me a lot!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_light_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Mike</a><span class="label">6 hours ago</span></h6>
<div class="media">The logo is ready, have a look and let me know what you think!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_light_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Julia</a><span class="label">1 day ago</span></h6>
<div class="media">We should better consider our social media marketing strategy!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="text-center"><a href="javascript:void(0)">View All Messages</a></li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li id="notifications-widget" class="dropdown dropdown-center-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-flag"></i>
<span class="badge badge-important">1</span>
<span class="badge badge-warning">2</span>
</a>
<ul class="dropdown-menu widget">
<li class="widget-heading"><a href="javascript:void(0)" class="pull-right widget-link"><i class="icon-cog"></i></a><a href="javascript:void(0)" class="widget-link">System</a></li>
<li>
<ul>
<li class="label label-important">20 min ago</li>
<li class="text-error">Support system is down for maintenance!</li>
</ul>
</li>
<li>
<ul>
<li class="label label-warning">3 hours ago</li>
<li class="text-warning">PHP upgrade started!</li>
</ul>
</li>
<li>
<ul>
<li class="label label-warning">5 hours ago</li>
<li class="text-warning"><a href="javascript:void(0)" class="widget-link">1 support ticket</a> just opened!</li>
</ul>
</li>
<li class="widget-heading"><a href="javascript:void(0)" class="pull-right widget-link"><i class="icon-bookmark"></i></a><a href="javascript:void(0)" class="widget-link">Project #3</a></li>
<li>
<ul>
<li class="label label-success">3 weeks ago</li>
<li class="text-success">Project #3 <a href="javascript:void(0)" class="widget-link">published</a> successfully!</li>
</ul>
</li>
<li>
<ul>
<li class="label label-info">1 month ago</li>
<li class="text-info">Milestone #3 achieved!</li>
<li class="text-info"><a href="javascript:void(0)" class="widget-link">John Doe</a> joined the project!</li>
</ul>
</li>
<li>
<ul>
<li class="label">1 year ago</li>
<li class="text-muted">This is an old notification</li>
</ul>
</li>
<li class="divider"></li>
<li class="text-center"><a href="javascript:void(0)">View All Notifications</a></li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li class="dropdown dropdown-user">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><img src="img/template/avatar.png" alt="avatar" /> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0)" class="loading-on"><i class="icon-refresh"></i> Refresh</a>
</li>
<li class="divider"></li>
<li>
<a href="#modal-user-settings" role="button" data-toggle="modal"><i class="icon-user"></i> User Profile</a>
</li>
<li>
<a href="javascript:void(0)"><i class="icon-wrench"></i> App Settings</a>
</li>
<li class="divider"></li>
<li>
<a href="page_login.php"><i class="icon-lock"></i> Log out</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<div id="inner-container"><aside id="page-sidebar" class="nav-collapse collapse">
<form id="sidebar-search" method="post" onsubmit="return false;" />
<div class="input-append">
<input type="text" placeholder="Search.." class="remove-box-shadow remove-transition remove-radius" />
<button><i class="icon-search"></i></button>
</div>
</form>
<nav id="primary-nav">
<ul>
<li>
<a href="index.php"><i class="icon-fire"></i>Dashboard</a>
</li>
<li>
<a href="#"><i class="icon-magic"></i>UI Elements</a>
<ul>
<li>
<a href="page_ui_general.php"><i class="icon-star"></i>General</a>
</li>
<li>
<a href="page_forms.php"><i class="icon-th-list"></i>Forms</a>
</li>
<li>
<a href="page_tables.php"><i class="icon-table"></i>Tables</a>
</li>
</ul>
</li>
<li class="active">
<a href="#"><i class="icon-leaf"></i>Components</a>
<ul>
<li>
<a href="page_charts.php" class="active"><i class="icon-bar-chart"></i>Charts</a>
</li>
<li>
<a href="page_calendar.php"><i class="icon-calendar"></i>Calendar</a>
</li>
<li>
<a href="page_datatables.php"><i class="icon-th"></i>DataTables</a>
</li>
</ul>
</li>
<li>
<a href="page_typography.php"><i class="icon-font"></i>Typography</a>
</li>
<li>
<a href="page_gallery.php"><i class="icon-picture"></i>Gallery</a>
</li>
<li>
<a href="#"><i class="icon-tint"></i>Icons</a>
<ul>
<li>
<a href="page_fontawesome.php">FontAwesome</a>
</li>
<li>
<a href="page_gemicon.php">Gemicon</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="icon-file-alt"></i>Pages</a>
<ul>
<li>
<a href="page_profile.php">Profile</a>
</li>
<li>
<a href="page_faq.php">Faq</a>
</li>
<li>
<a href="page_errors.php">Errors</a>
</li>
<li>
<a href="page_blank.php">Blank</a>
</li>
</ul>
</li>
<li>
<a href="page_login.php"><i class="icon-off"></i>Login Page</a>
</li>
</ul>
</nav>
</aside><div id="page-content">
<ul id="nav-info" class="clearfix">
<li><a href="index.php"><i class="icon-home"></i></a></li>
<li><a href="javascript:void(0)">Components</a></li>
<li class="active"><a href="">Charts</a></li>
</ul>
<h3 class="page-header page-header-top">Server Load <small>Live data demostration!</small> <span id="server-live" class="badge badge-important">0%</span></h3>
<div id="example-chart-live" class="chart-live"></div>
<h3 class="page-header">Classic Charts <small>All kinds of them</small></h3>
<div class="row-fluid">
<div class="span6">
<h3 class="page-header-sub">Lines with points and tooltips</h3>
<div id="example-chart-classic" class="chart"></div>
</div>
<div class="span6">
<h3 class="page-header-sub">Bars</h3>
<div id="example-chart-bars" class="chart"></div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<h3 class="page-header-sub">Stacked Lines</h3>
<div id="example-chart-stacked" class="chart"></div>
</div>
<div class="span6">
<h3 class="page-header-sub">Pie</h3>
<div id="example-chart-pie" class="chart"></div>
</div>
</div>
</div>
<footer>
<script>var d = new Date(); if (d.getFullYear() === 2013) { document.write('2013'); } else { document.write('2013-' + d.getFullYear()); }</script> &copy; <strong>uAdmin 1.0</strong> - Crafted with <i class="icon-heart"></i> by <strong><a href="http://themeforest.net/user/pixelcave/portfolio?ref=pixelcave" target="_blank">pixelcave</a></strong>
</footer>
</div>
</div>
<a href="#" id="to-top"><i class="icon-chevron-up"></i></a>
<div id="modal-user-settings" class="modal hide">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Profile Settings</h4>
</div>
<div class="modal-body">
<ul id="example-user-tabs" class="nav nav-tabs">
<li class="active"><a href="#example-user-tabs-account"><i class="icon-cogs"></i> Account</a></li>
<li><a href="#example-user-tabs-profile"><i class="icon-user"></i> Profile</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="example-user-tabs-account">
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Success!</strong> Password changed!
</div>
<form class="form-horizontal" />
<div class="control-group">
<label class="control-label" for="example-user-username">Username</label>
<div class="controls">
<input type="text" id="example-user-username" class="disabled" value="administrator" disabled="" />
<span class="help-block">You can't change your username!</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-pass">Password</label>
<div class="controls">
<input type="password" id="example-user-pass" />
<span class="help-block">if you want to change your password enter your current for confirmation!</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-newpass">New Password</label>
<div class="controls">
<input type="password" id="example-user-newpass" />
</div>
</div>
</form>
</div>
<div class="tab-pane" id="example-user-tabs-profile">
<h5 class="page-header-sub hidden-phone">Image</h5>
<div class="form-horizontal hidden-phone">
<div class="control-group">
<img src="img/placeholders/image_dark_120x120.png" alt="image" />
</div>
<div class="control-group">
<form action="index.php" class="dropzone" />
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
</div>
</div>
<form class="form-horizontal" />
<h5 class="page-header-sub">Details</h5>
<div class="control-group">
<label class="control-label" for="example-user-firstname">Firstname</label>
<div class="controls">
<input type="text" id="example-user-firstname" value="John" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-lastname">Lastname</label>
<div class="controls">
<input type="text" id="example-user-lastname" value="Doe" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-gender">Gender</label>
<div class="controls">
<select id="example-user-gender">
<option />Male
<option />Female
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-birthdate">Birthdate</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-birthdate" class="input-small input-datepicker" />
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-skills">Skills</label>
<div class="controls">
<select id="example-user-skills" multiple="multiple" class="select-chosen">
<option selected="" />html
<option selected="" />css
<option />javascript
<option />php
<option />mysql
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-bio">Bio</label>
<div class="controls">
<textarea id="example-user-bio" class="textarea-elastic" rows="3">Bio Information..</textarea>
</div>
</div>
<h5 class="page-header-sub">Social</h5>
<div class="control-group">
<label class="control-label" for="example-user-fb">Facebook</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-fb" />
<span class="add-on"><i class="icon-facebook"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-twitter">Twitter</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-twitter" />
<span class="add-on"><i class="icon-twitter"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-pinterest">Pinterest</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-pinterest" />
<span class="add-on"><i class="icon-pinterest"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-github">Github</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-github" />
<span class="add-on"><i class="icon-github"></i></span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal"><i class="icon-remove"></i> Close</button>
<button class="btn btn-success"><i class="icon-spinner icon-spin"></i> Save changes</button>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/vendor/jquery-1.8.3.min.js"%3E%3C/script%3E'));</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script><script>
$(function(){function o(){if(s.length>0)s=s.slice(1);while(s.length<300){var e=s.length>0?s[s.length-1]:50;var t=e+Math.random()*10-5;if(t<0)t=0;if(t>100)t=100;s.push(t)}$("#server-live").html(t.toFixed(0)+"%");var n=[];for(var r=0;r<s.length;++r)n.push([r,s[r]]);return n}function a(){e.setData([o()]);e.draw();setTimeout(a,30)}var e=$("#example-chart-live");var t=$("#example-chart-classic");var n=$("#example-chart-bars");var r=$("#example-chart-stacked");var i=$("#example-chart-pie");var s=[];var u={series:{shadowSize:0},lines:{show:true,lineWidth:1.5,fill:true,fillColor:{colors:[{opacity:.1},{opacity:1}]}},colors:["#555555"],grid:{show:false},yaxis:{min:0,max:130},xaxis:{show:false}};var e=$.plot(e,[{data:o()}],u);a();var f=[[0,200],[1,250],[2,360],[3,584],[4,1250],[5,1100],[6,1500],[7,1521],[8,1600],[9,1658],[10,1623],[11,1900],[12,2100],[13,1700],[14,1620],[15,1820],[16,1950],[17,2220],[18,1951],[19,2152],[20,2300],[21,2325],[22,2200],[23,2156],[24,2350],[25,2420],[26,2480],[27,2320],[28,2380],[29,2520],[30,2590]];var l=[[0,50],[1,180],[2,200],[3,350],[4,700],[5,650],[6,700],[7,780],[8,820],[9,880],[10,1200],[11,1250],[12,1500],[13,1195],[14,1300],[15,1350],[16,1460],[17,1680],[18,1368],[19,1589],[20,1780],[21,2100],[22,1962],[23,1952],[24,2110],[25,2260],[26,2298],[27,1985],[28,2252],[29,2300],[30,2450]];$.plot(t,[{data:f,lines:{show:true,fill:true,fillColor:{colors:[{opacity:.05},{opacity:.05}]}},points:{show:true},label:"All Visits"},{data:l,lines:{show:true,fill:true,fillColor:{colors:[{opacity:.05},{opacity:.05}]}},points:{show:true},label:"Unique Visits"}],{legend:{position:"nw",backgroundColor:"#f6f6f6",backgroundOpacity:.8},colors:["#555555","#db4a39"],grid:{borderColor:"#cccccc",color:"#999999",labelMargin:10,hoverable:true,clickable:true},yaxis:{ticks:5},xaxis:{tickSize:2}});var c=null;t.bind("plothover",function(e,t,n){$("#x").text(t.x.toFixed(2));$("#y").text(t.y.toFixed(2));if(n){if(c!==n.dataIndex){c=n.dataIndex;$("#tooltip").remove();var r=n.datapoint[0],i=n.datapoint[1];$('<div id="tooltip" class="chart-tooltip"><strong>'+i+"</strong> visits</div>").css({top:n.pageY-30,left:n.pageX+5}).appendTo("body").show()}}else{$("#tooltip").remove();c=null}});var h=[[1,30],[3,60],[5,45],[7,50],[9,10]];$.plot(n,[{data:h,bars:{show:true,fillColor:{colors:[{opacity:1},{opacity:1}]}},label:"Example label"}],{legend:{backgroundColor:"#f6f6f6",backgroundOpacity:.8},colors:["#39d5db"],grid:{borderColor:"#cccccc",color:"#999999",labelMargin:10},yaxis:{ticks:5},xaxis:{tickSize:1}});var p=[];for(var d=0;d<=10;d++)p.push([d,parseInt(Math.random()*20)]);var v=[];for(var d=0;d<=10;d++)v.push([d,parseInt(Math.random()*20)]);var m=[];for(var d=0;d<=10;d++)m.push([d,parseInt(Math.random()*20)]);var g=0,y=true,b=false,w=false;$.plot(r,[{data:p,label:"Blue"},{data:v,label:"Red"},{data:m,label:"Green"}],{series:{stack:true,lines:{show:true,fill:true}},lines:{show:true,lineWidth:1.5,fill:true,fillColor:{colors:[{opacity:1},{opacity:1}]}},legend:{backgroundColor:"#f6f6f6",backgroundOpacity:.8},colors:["#39a8db","#db4a39","#a8db39"],grid:{borderColor:"#cccccc",color:"#999999",labelMargin:10},yaxis:{ticks:5},xaxis:{tickSize:1}});var E=[];var S=Math.floor(Math.random()*10)+1;for(var d=0;d<4;d++)E[d]={label:"Data "+(d+1),data:Math.floor(Math.random()*100)+1};$.plot(i,E,{series:{pie:{show:true,radius:1,label:{show:true,radius:3/4,formatter:function(e,t){return'<div class="chart-pie-label">'+e+"<br>"+Math.round(t.percent)+"%</div>"},background:{opacity:.5,color:"#000000"}}}},colors:["#39a8db","#db4a39","#a8db39","#39d5db"],legend:{show:false}})});
</script>
</body>
</html>